<template>
  <div id="NewMusic">
       <ul>
              <li   v-for="(items,index) in NewMusicData" 
       :key="index">
                <div><img :src="NewMusicData[index].picUrl" alt=""><span class="iconfont iconL">&#xea6e;</span></div>
              <div>
                    <span>{{NewMusicData[index].name}}</span>
                   <span class="mv ">MV</span>
                   <span class="title">{{NewMusicData[index].song}}</span>
              </div>
          </li>
          <!-- <li>
                <div><img src="../../public/homeImg/NewMusic1.jpg" alt=""><span class="iconfont iconL">&#xea6e;</span></div>
              <div>
                    <span>look</span>
                   
                   <span class="mv ">MV</span>
                   <span class="title">落日飞车</span>
              </div>
          </li> -->
      </ul>

  </div>
</template>

<script>
import {jtRouter} from '../utils/data'
export default {
      props:{
     data:{
            typeof:Object || Array,
            default:_=>{
                return{}
            }
        },
   },
   data() {
    return {
        NewMusicData:[]
    }
   },
   watch:{
    data(newVal,oldVal) {
        this.NewMusicData = newVal
        // console.log(this.NewMusicData)
    },
   },
   mounted() {
     console.log(this.data)
   },
}
</script>
<style lang="less" scoped>
@font-face {
  font-family: 'iconfont';
  src: url('../../public/font_home/iconfont.woff2?t=1657706050349') format('woff2'),
       url('../../public/font_home/iconfont.woff?t=1657706050349') format('woff'),
       url('../../public/font_home/iconfont.ttf?t=1657706050349') format('truetype');
}
.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
div,span,ul,li,img{
    font-size: 0;
}
#NewMusic{
    width: 100%;
    // display: flex;
    margin: 10px;
    
 ul{
    display: flex;
        width: 100%;
        height:330px;
            flex-wrap: wrap;
            overflow: hidden;
        li{
            width: 30%;
            display: flex;
            height: 64.5px;
            margin-bottom: 18px;
            overflow: hidden;
            div:first-child{
                position: relative;
            }
            .title{
                   white-space: nowrap;
                    text-overflow: ellipsis;
                    overflow: hidden;
            }
            div:nth-child(2){
                padding-left: 5px;
                span:first-child{
                display: block;
                 margin-top: 2px;
               
            }
            
            span:nth-child(1){
                color: #373737;
            }
                span{
                    font-size: 16px;
                    color: #9F9F9F;
                    margin-top: 10px;
                   
                }
            }
            div{
                height: 100%;

            }
            img{
                
                height: 100%;
                border-radius: 10%;
            }
            
        }
        
      
    }

}

.iconL{
    font-size: 38px;
    position: absolute;
    left: 50%;
    top: 50%;
     margin-left: -19px;
    margin-top: -19px;
}
.mv{
    color: #EC5252 !important;
    display: inline-block;
    border: solid 1px #EC5252;
    line-height: 14px;
    padding: 0 1px;
}

</style>